<template>
  <div class="Header">
    <div class="left">
      <img src="../assets/images/logo.png" alt="logo" />
      <div>
        <el-dropdown>
          <span class="el-dropdown-link">
            rock点餐系统<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>rock点餐系统</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="right">
      <a
        href="https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/extensions/cms/introduction.html"
        target="blank"
      >
        <el-tooltip
          class="item"
          effect="dark"
          content="使用文档"
          placement="bottom-start"
        >
          <img src="../assets/images/wenhao.png" alt="?" />
        </el-tooltip>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Header",
};
</script>

<style lang="less" scoped>
.Header {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 95px;
  background: #33404e;
  .left {
    display: flex;
    align-items: center;
    height: 95px;
    img {
      width: 40px;
      height: 40px;
      margin: 0 20px;
    }
  }
  .right {
    height: 95px;
    line-height: 95px;
    margin-right: 20px;
    img {
      width: 20px;
      height: 20px;
      align-items: center;
      cursor: pointer;
    }
  }
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  font-size: 22px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
